<template>
  <div id="home">
    <el-container>
      <el-aside width="200px">
        <ul>
          <li v-for="item of list" :key="item._id">
            <!-- <el-tooltip :content="item.productName" placement="top"> -->
              <router-link :to="`/details/${item.productId}`">
                <i class="el-icon-s-custom"></i>{{ item.productName }}
              </router-link>
            <!-- </el-tooltip> -->
          </li>
        </ul>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import get from "../../axios/index";
export default {
  name: "home",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    get(this.$store.state.api + "/getmoneyctrl").then((res) => {
      this.list = res.result;
    //   console.log(res);
    });
  },
};
</script>

<style scoped>
#home {
  height: 100%;
}
ul {
  background:#545c64;
}
ul li {
  height: 40px;
  line-height: 40px;
  background: #4B79A1;
  border-bottom: 2px solid #fff;
}
a {
  padding: 0 15px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
  /* display: inline-block; */
  /* border: 1px solid red; */
}
.el-aside {
  height: 100%;
  background:#283E51;
}
.el-container {
  height: 100%;
}
</style>
